<template>
    <div>
      <!-- 面包屑导航 -->
      <el-bread></el-bread>
      <!-- 按钮 -->
      <el-button @click="addInfo" class="btnInfo" size="small" type="primary" plain
        >添加</el-button
      >
      <!-- 数据列表 -->
      <v-list @edit="edit"></v-list>
      <!-- 弹框组件 -->
      <v-dialog ref="dialogRef" @cancel="cancel" :isShow="isShow" :isAdd="isAdd"></v-dialog>
    </div>
  </template>

<script>
//引入列表组件
import vList from './list.vue'
//引入封装好的弹窗组件
import vDialog from './dialog.vue'
export default {
  data(){
    return {
      isShow:false,//用于弹窗的显示隐藏
      isAdd:true//用于区分添加和编辑
    }
  },
  methods:{
    addInfo(){
      this.isShow=true
      this.isAdd=true
    },
    cancel(e){
      this.isShow=e
    },
    edit(e){
      this.isShow=true
      this.isAdd=false
      this.$refs.dialogRef.lookup(e)
    }
  },
  components:{
    vList,vDialog
  }
}
</script>

<style lang="less" scoped>
.btnInfo {
  margin: 10px;
}
</style>